<script setup>
import * as Three from "three";
import { onMounted, render } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
function init() {
  // 创建场景
  const scene = new Three.Scene();
  // 创建模型外观
  const geometry = new Three.BoxGeometry(10, 10, 10);
  // 创建材质
  const material = new Three.MeshLambertMaterial({
      color: "red",
  });
  // 创建模型
  const mesh = new Three.Mesh(geometry, material);
  // 场景添加模型
  scene.add(mesh);

  //创建摄像机
  const camera = new Three.PerspectiveCamera(45, 1, 0.1, 1000);
  // 设置相机位置
  camera.position.set(100, 100, 100);
  // 设置相机初始聚焦点
  // camera.lookAt(0, 0, 0)
  camera.lookAt(mesh.position);

  //   创建点光源
  //   const pointLight = new Three.PointLight("#fff", 1.0);
  //   禁止光源衰减
  //   pointLight.decay = 0;
  //   pointLight.position.set(20, 20, 20);
  //   scene.add(pointLight);

  // 创建环境光
  const lightEvn = new Three.AmbientLight("#fff", 1);
  // 创建平行光
  const lightDir = new Three.DirectionalLight('#fff', 1)
  lightDir.position.set(20,20,20)
  scene.add(lightEvn);
  scene.add(lightDir);

  // 创建渲染器
  const renderer = new Three.WebGLRenderer();
  // canvas画布大小
  renderer.setSize(800, 800);
  // 执行渲染
  renderer.render(scene, camera);
  // 将渲染添加到网页上
  document.getElementById("scene").appendChild(renderer.domElement);
  const control = new OrbitControls(camera, renderer.domElement);
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
}

onMounted(() => {
  init();
});
</script>
<template>
  <div class="mianContainer" id="scene"></div>
</template>
<style lang="scss" scoped>
.mianContainer {
  width: 100%;
  height: calc(100vh - 100px);
}
</style>
